<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hell world</title>
  <style>
    .red {
      color: red
    }
  </style>
</head>

<body>
  <!-- 用于内容显示容器 挂载点 -->
  <div id="app"></div>


  <!-- react核心类库 -->
  <script src="./js/react.development.js"></script>
  <!-- dom操作 -->
  <script src="./js/react-dom.development.js"></script>
  <!-- 解析jsx语法的兼容库 -->
  <script src="./js/babel.min.js"></script>
  <script type="text/babel">
    const app = document.querySelector('#app')

    const title = '我是一个按钮'
    const src = 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg'

    const html = '<a href="http://www.baidu.com">百度一下</a>'

    // jsx => js扩展
    // 如果是单行则不需要小括号，多行需要使用小括号括起来
    const vnode = (<div>
      {
        // 动态属性，直接写{} 不要写引号引起来
      }
      <button title={title}>{title}</button>
      <hr />
      <img src={src} />
      <hr />
      {
        // js中class是es6中的定义类的关键词  jsx提供用于class兼容解决方案 className
      }
      <div className="red">我是一个需要样式的标签</div>

      <div>
        {
          // js是 for是一个循环的关键词 jsx提供兼容方案 htmlFor
        }
        <label htmlFor="username">账号</label>
        <input type="text" id="username" />
      </div>

      {
        // 样式  style不能写成字符串，只能对象的方式来写
      }
      <div style={{ color: 'red', fontSize: '20px' }}>style样式</div>

      {
        // 解析html元素
        // 默认是对html内容进行转义，如果想让html不转义就需要使用jsx提供属性  jsx语法不推荐你在jsx解析html内容
      }
      <div>{html}</div>
      {
        // 解析html
      }
      <div dangerouslySetInnerHTML={ { __html: html } }></div>


    </div>)


    // 把虚拟dom转为真实的dom并挂载到页面中
    ReactDOM.render(vnode, app)
  </script>


</body>

</html>